<template>
  <div class="b-header">
    <p class="tit">{{ sysName }}</p>
    <div class="tool-box">
      <el-switch
        v-model="switchVal"
        active-color="#ffffff"
        inactive-color="#ffffff"
        active-text="测试"
        inactive-text="生产"
        @change="changeEnv">
      </el-switch>
      <el-select size="mini" v-model="currentAppId" placeholder="请选择" popper-class="zIndex-popper" @change="handleAppSelect">
        <el-option v-for="item in appList"
                   :key="item.app_id"
                   :label="item.app_name"
                   :value="item.app_id"
        ></el-option>
      </el-select>
      <el-button type="text" icon="el-icon-plus" @click="isOpenCreate = true">创建应用</el-button>
      <!--<el-button type="text" @click="openPwdDialog">修改密码</el-button>-->
      <span @click="gitback" style="cursor: pointer;">返回</span>
      <el-button type="text" @click="logout">退出</el-button>
    </div>
    <!--<span class="logo"></span>-->
    <!-- 创建应用窗口   -->
    <el-dialog :visible.sync="isOpenCreate" class="dialog" @close="resetForm('appForm')">
      <div class="dialog-box">
        <el-form class="form-box" ref="appForm" :model="appForm" :rules="appRules">
          <el-form-item class="fm-item" prop="app_name">
            <el-input placeholder="请输入应用名称" v-model="appForm.app_name" @keyup.native.enter="addApp"></el-input>
          </el-form-item>
          <el-form-item class="fm-item" prop="app_type">
            <span class="fm-label">选择平台</span>
            <ul class="plat-list">
              <li :class="{ 'active':platIndex === '0' }" @click="selectPlat('0')">
                <el-radio v-model="appForm.app_type"></el-radio>
                <span>IOS</span>
              </li>
              <li :class="{ 'active':platIndex === '1' }" @click="selectPlat('1')">
                <el-radio v-model="appForm.app_type"></el-radio>
                <span>Android</span>
              </li>
            </ul>
          </el-form-item>
          <el-form-item class="fm-item" prop="app_own">
            <el-input placeholder="请输入公司名称" v-model="appForm.app_own" @keyup.native.enter="addApp"></el-input>
          </el-form-item>
          <div class="btn-box">
            <el-button type="primary" @click="addApp">创建应用</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- 修改密码窗口   -->
    <el-dialog :visible.sync="isOpenPwd" title="修改密码" class="dialog" @close="resetForm('pwdForm')">
      <div class="dialog-box">
        <el-form class="form-box" ref="pwdForm" :model="pwdForm" :rules="pwdRules">
          <el-form-item class="fm-item" prop="password">
            <el-input placeholder="请输入密码" v-model="pwdForm.password" @keyup.native.enter="updatePassword" type="password"></el-input>
          </el-form-item>
          <el-form-item class="fm-item" prop="confirm_password">
            <el-input placeholder="请再次输入密码" v-model="pwdForm.confirm_password" @keyup.native.enter="updatePassword" type="password"></el-input>
          </el-form-item>
          <div class="btn-box">
            <el-button type="primary" @click="updatePassword">保存</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
  import ajax from '../../api/ajax/ajax'
  import { mixinParams } from '../../assets/js/mixin1'
  import api from '../../api/url'
  import {mapGetters} from 'vuex'

  export default {
    name: 'BHeader',
    data () {
      var validPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (value.length < 6 || value.length > 10) {
            callback(new Error('密码至少为6位数，且不超过10个字符'))
          } else {
            if (this.pwdForm.confirm_password !== '') {
              this.$refs.pwdForm.validateField('confirm_password')
            }
          }
          callback()
        }
      }
      var validConfirmPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.pwdForm.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      }
      return {
        isOpenCreate: false,
        appList: null,
        platIndex: '0',
        appForm: {
          app_name: '',
          app_type: '0',
          app_own: ''
        },
        appRules: {
          app_name: [
            { required: true, message: '请输入应用名称', trigger: 'blur' },
            { min: 1, max: 50, message: '应用名称不能为空且限 50 个字符', trigger: 'blur' }
          ],
          app_own: [
            { required: true, message: '请输入公司名称', trigger: 'blur' },
            { min: 1, max: 20, message: '应用名称不能为空且限 20 个字符', trigger: 'blur' }
          ]
        },
        isOpenPwd: false,
        pwdForm: {
          password: '',
          confirm_password: ''
        },
        pwdRules: {
          password: [
            { validator: validPass, trigger: 'blur' }
          ],
          confirm_password: [
            { validator: validConfirmPass, trigger: 'blur' }
          ]
        },
        switchVal: false,
        currentAppId: ''
      }
    },
    computed: {
      ...mapGetters([
        'sysName'
      ])
    },
    mixins: [mixinParams],
    watch: {
      appFlag: {
        handler: function (val) {
          this.currentAppId = this.bugAppId
          this.appFlag = false
        },
        deep: true
      },
      appObjFlag: {
        handler: function (val) {
          this.queryAppList()
          this.appObjFlag = false
        },
        deep: true
      }
    },
    methods: {
      // 获取当前环境
      getEnv () {
        let params = {
          exp_env: this.expEnv
        }
        ajax.post(api.CHANGE_EVN, params).then(res => {})
      },
      // 切换环境
      changeEnv (val) {
        this.switchVal = val
        if (this.switchVal) {
          this.pd_updateExpEnv('1')
        } else {
          this.pd_updateExpEnv('0')
        }
        this.getEnv()
      },
      // 打开修改密码窗口
      openPwdDialog () {
        this.isOpenPwd = true
        this.resetForm('pwdForm')
      },
      // 修改用户登录秘密
      updatePassword () {
        this.$refs.pwdForm.validate((valid) => {
          if (valid) {
            ajax.post(api.UPDATE_PASSWORD, this.pwdForm).then(res => {
              this.isOpenPwd = false
              this.$message({
                type: 'success',
                message: '修改密码成功'
              })
              this.resetForm('pwdForm')
            })
          } else {
            return false
          }
        })
      },
      // 重置表单并移除校验
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      // 查询应用列表
      queryAppList () {
        ajax.post(api.SELECT_APP_LIST).then(res => {
          this.appList = res.data
        })
      },
      // 切换当前应用
      handleAppSelect (val) {
        this.pd_updateAppId(val)
        sessionStorage.setItem('appId', val)
      },
      // 选择平台
      selectPlat (index) {
        if (this.platIndex === index) {
          this.platIndex = ''
          this.appForm.app_type = ''
        } else {
          this.platIndex = index
          this.appForm.app_type = index
        }
      },
      // 添加应用
      addApp () {
        this.$refs.appForm.validate((valid) => {
          if (valid) {
            ajax.post(api.INSERT_APP, this.appForm).then(res => {
              this.isOpenCreate = false
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.platIndex = '0'
              this.resetForm('appForm')
              this.queryAppList()
            })
          } else {
            return false
          }
        })
      },
      // 返回
      gitback () {
        window.location.href = '/view/systemList'
      },
      // 退出登录
      logout () {
        this.$confirm('将退出登录是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          ajax.post(api.BUG_LOGOUT).then(res => {
            this.$message({
              type: 'success',
              message: '退出成功!'
            })
            setTimeout(() => {
              window.location.href = '/'
            }, 300)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
      }
    },
    created () {
      let bugAppId = sessionStorage.getItem('appId')
      if (bugAppId !== 'undefined') {
        this.currentAppId = bugAppId
      }
      this.queryAppList()
      this.getEnv()
    }
  }
</script>
<style lang="stylus">
  .b-header
    height 70px
    background #409eff
    padding 0 15px
    position relative
    z-index 500
    .el-switch
      margin-right 20px
      .el-switch__core:after
        background #4093ff
      .el-switch__label
        color #4093ff
        &.is-active
          color #fff
    .tool-box
      float right
      height 70px
      line-height 70px
      overflow hidden
      .el-select
        margin-right 20px
        .el-input
          .el-input__inner
            width 180px
            padding 0!important
            color #fff
            background transparent
            border 0 none
            border-bottom 1px solid #fff
            border-radius 0
            &::placeholder
              color #fff
          .el-icon-arrow-up:before
            color #fff
        .el-input__icon
          width 14px
      .el-button, & > span
        display inline-block
        height 40px
        line-height 40px
        padding 0
        margin 0 20px 0 0
        color #fff
    .logo
      display block
      height 70px
      width 123px
      margin-left 15px
      background url(./../../images/logo1.png) no-repeat center center
    .tit
      display inline-block
      height 70px
      line-height 70px
      color #fff
      font-size 24px
    .el-dialog
      width 300px
      height 400px
    .el-dialog
      width 500px
      height auto
  .dialog-box
    height 100%
    .main
      height calc(100% - 56px)
      margin 10px 0 20px 10px
      background #fff
    .form-box
      width 400px
      margin 0 auto
      .fm-item
        margin-bottom 20px
        .el-input
          border-bottom 1px solid #eee
          position relative
          input
            display block
            width 100%
            height 36px
            padding 6px 0
            line-height 24px
            border 0 none
          &:after
            content ''
            display block
            position absolute
            left 0
            right 100%
            height 1px
            bottom 0
            transition right .3s linear
        .el-form-item__error
          line-height 20px
        &.is-error
          .el-input
            &:after
              right 0
              background #f56c6c
        &.is-success
          .el-input
            &:after
              right 0
              background #4093ff
      .btn-box
        padding 10px 0
    .plat-list
      overflow hidden
      li
        float left
        width 50%
        padding 10px 0
        position relative
        .el-radio
          position absolute
          left 0
          top 0
          right 0
          bottom 0
          opacity 0
          z-index -1
        & > span
          display block
          padding 25px 15px 35px
          font-size 14px
          color #333
          line-height 24px
          text-align center
          margin 0 10px
          border 1px solid #eee
          position relative
          transition color .3s linear, border-color .3s linear
          &:after
            content '\e604'
            font-family 'iconfont'
            display block
            font-size 32px
            color #fff
            margin 3px auto 0
            transition color .3s linear
          &:before
            content '\e8f7'
            font-family 'iconfont'
            position absolute
            right 10px
            bottom 10px
            color #fff
            font-size 24px
            transition color .3s linear
        &:first-child
          & > span
            margin-left 0
        &:nth-child(2)
          & > span
            &:after
              content '\e615'
        &:last-child
          span
            margin-right 0
        &.active
          span
            color #4093ff
            border 1px solid #4093ff
            &:after
              color #4093ff
            &:before
              color #4093ff
    .btn-box
      .el-button
        display block
        width 100%
        height 36px
        line-height 36px
        padding 0
  .v-modal
    z-index 100 !important
  .el-select-dropdown__item.selected
    color #4093ff
</style>
